import { ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';
import React from 'react';

const PurchaseOrder = () => {
  // 表格列配置
  const columns = [
    {
      title: '采购订单号',
      dataIndex: 'orderId',
      key: 'orderId',
      width: 180,
      fixed: 'left',
      search: false
    },
    {
      title: '产品名称',
      dataIndex: 'productName',
      key: 'productName',
      width: 200,
      render: (text) => <a>{text}</a>
    },
    {
      title: '供应商名称',
      dataIndex: 'supplierName',
      key: 'supplierName',
      width: 200,
      search: true
    },
    {
      title: '订单创建时间',
      dataIndex: 'purchaseTime',
      key: 'purchaseTime',
      valueType: 'dateTime',
      width: 180,
    },
    {
      title: '最新入库时间',
      dataIndex: 'purchaseTime',
      key: 'purchaseTime',
      valueType: 'dateTime',
      width: 180,
    },
    {
      title: '采购数量',
      dataIndex: 'quantity',
      key: 'quantity',
      width: 120,
      align: 'right',
      render: (text) => `${text} 件`
    },
    {
      title: '入库数量',
      dataIndex: 'quantity',
      key: 'quantity',
      width: 120,
      align: 'right',
      render: (text) => `${text} 件`
    },
    {
      title: '采购状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      fixed: 'right',
      align: 'center',
      valueEnum: {
        0: { text: '待审核', status: 'Default' },
        1: { text: '已批准', status: 'Processing' },
        2: { text: '已发货', status: 'Success' },
        3: { text: '已取消', status: 'Error' },
        4: { text: '已完成', status: 'Success' }
      }
    },
    {
      title: '操作',
      key: 'action',
      width: 180,
      fixed: 'right',
      render: (_, record) => (<>
        <a style={{ marginRight: 8 }} onClick={() => handleViewDetail(record.orderId)}>编辑</a>
        <a style={{ marginRight: 8 }} onClick={() => handleViewDetail(record.orderId)}>入库</a>
        <a onClick={() => handleViewDetail(record.orderId)}>查看详情</a>
      </>
      )
    }
  ];

  // 模拟数据请求
  const fetchData = async (params) => {
    // 实际项目中替换为真实API请求
    console.log('请求参数:', params);
    const data = [
      {
        orderId: 'PO-20230804001',
        purchaseTime: '2023-08-04T10:30:00',
        productName: '笔记本电脑',
        supplierName: '联想集团',
        quantity: 50,
        status: 2,
      },
      {
        orderId: 'PO-20230804002',
        purchaseTime: '2023-08-04T14:15:00',
        productName: '显示器',
        supplierName: '戴尔公司',
        quantity: 100,
        status: 1
      },
      {
        orderId: 'PO-20230804003',
        purchaseTime: '2023-08-03T09:20:00',
        productName: '服务器',
        supplierName: '华为技术',
        quantity: 20,
        status: 4
      },
      {
        orderId: 'PO-20230803001',
        purchaseTime: '2023-08-03T16:45:00',
        productName: '办公桌椅',
        supplierName: '宜家家居',
        quantity: 200,
        status: 3
      }
    ];

    return {
      data,
      total: data.length,
      success: true
    };
  };

  // 查看详情处理函数
  const handleViewDetail = (orderId: string) => {
    console.log('查看订单详情:', orderId);
    // 实际项目中这里执行路由跳转或打开详情弹窗
  };

  return (
    <ProTable
      columns={columns as any}
      request={fetchData}
      rowKey="orderId"
      pagination={{ pageSize: 10 }}
      scroll={{ x: 1500 }}
      options={false}
      toolBarRender={() => [
        <Button key="add" type="primary">
          新建采购订单
        </Button>
      ]}
    />
  );
};

export default PurchaseOrder;